<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title>组件基础-监听子组件事件</title>
</head>
<body>


<div id="app">
  <div :style="{ fontSize: postFontSize + 'em' }">
      	<blog-post
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
        v-on:enlarge-text="postFontSize += 0.1"
         >
        </blog-post>
  </div>
  ------------------使用事件抛出一个值----------------------------------------
  <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post-a
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
        v-on:enlarge-text="postFontSize += $event"
         >
        </blog-post-a>
  </div>
  -------------------事件处理函数是一个方法---------------------------------------
  <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post-a
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
        v-on:enlarge-text="onEnlargeText">
        </blog-post-a>
  </div>

  <custom-input
    v-bind:value="searchText"
    v-on:input="searchText = $event"
  >
  </custom-input>
</div>



<script type="text/javascript">

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text')">
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})

Vue.component('blog-post-a', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text', 0.1)">
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})


var app=new Vue({
  el: '#app',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue',content:'content-1' }
    ],
    postFontSize: 1,
  },

  methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}
})

</script>

</body>
</html>